<template>
  <div>
    <!-- 父子组件传值 -->
    <Title :title="title"></Title>
    <!-- 1.提供图表容器（建议适当增加高度） -->
    <div ref="chartContainer" style="height: 300px;"></div>
  </div>
</template>

<script>
// 2.引入柱状图构造函数 
import { Bar } from '@antv/g2plot';
import { get } from '@/utils/request'

export default {
  data() {
    return {
      title: '设备状态分布（柱状图）',
      empData: [] // 数据结构示例：[{ type: '在线', value: 10 }, { type: '离线', value: 5 }]
    }
  },
  methods: {
    // 加载柱状图
    loadBarChart() {
      const barPlot = new Bar(this.$refs.chartContainer, {
        data: this.empData,
        xField: 'value',  // 柱子长度对应数值
        yField: 'type',   // 分类字段（显示在Y轴）
        seriesField: 'type', // 颜色分组字段
        color: ({ type }) => {
          return type === '在线' ? '#a2a6ec' : '#ff7f7f' // 自定义颜色
        },
        label: {
          position: 'middle', // 标签位置
          style: {
            fill: '#fff',      // 标签文字颜色
            fontSize: 14
          },
          formatter: (datum) => `${datum.value}台` // 自定义标签内容
        },
        legend: {
          position: 'top',     // 图例位置
          itemName: {
            style: {
              fill: '#fff'     // 图例文字颜色
            }
          }
        },
        xAxis: {
          label: {
            style: {
              fill: '#fff'    // X轴文字颜色
            }
          }
        },
        yAxis: {
          label: {
            style: {
              fill: '#fff'    // Y轴文字颜色
            }
          }
        },
        // 交互效果
        interactions: [{ type: 'active-region' }],
        // 自定义柱子样式
        barStyle: {
          radius: [4, 4, 0, 0] // 顶部圆角
        }
      })

      barPlot.render()
    },
    // 获取数据方法（保持原逻辑）
    async getEmpData() {
      const res = await get('/dashboard/queryDeviceOnlineNumber')
      console.log('设备状态数据:', res)
      this.empData = res.data || []
    }
  },
  async mounted() {
    await this.getEmpData()
    this.loadBarChart()
  }
}
</script>

<style lang="scss" scoped>
/* 可选：添加容器背景色 */
div[ref="chartContainer"] {
  background: #2a2a2a;
  border-radius: 8px;
  padding: 20px;
}
</style>